{{ define "goods/detail.html" }}

{{ template "base/base_header.html" .}}
<head>
	<title>天天生鲜-商品详情</title>
    {{ template "base/base_import.html" .}}
</head>
<body>
    {{ template "base/base_top.html" .}}

    {{ template "base/base_search_car.html" .}}

	{{ template "base/base_goods_type.html" .}}

	<div class="breadcrumb">
		<a href="/ttsx/index">全部分类</a>
		<span>></span>
		<a href="/ttsx/goods/list/{{ .GoodsDetail.type_id}}/1/?sort=default">{{ .GoodsDetail.type_name }}</a>
		<span>></span>
		<a href="/ttsx/goods/detail?id={{ .GoodsDetail.sku_id }}">商品详情</a>
	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img src="{{ .GoodsDetail.sku_image }}"></div>

		<div class="goods_detail_list fr">
			<h3>{{ .GoodsDetail.sku_name }}</h3>
			<p>{{ .GoodsDetail.desc }}</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em>{{ .GoodsDetail.price }}</em></span>
				<span class="show_unit">单  位：{{ .GoodsDetail.unite }}</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" value="1">
					<a href="javascript:" class="add fr">+</a>
					<a href="javascript:" class="minus fr">-</a>	
				</div> 
			</div>
			<div class="total">总价：<em>{{ .GoodsDetail.price }}元</em></div>
			<div class="operate_btn">
				<a href="javascript:;" class="buy_btn">立即购买</a>
				<a href="javascript:;" sku_id={{ .GoodsDetail.sku_id}} class="add_cart" id="add_cart">加入购物车</a>				
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		{{ template "base/base_goods_new.html" .}}

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active">商品介绍</li>
				<li>评论</li>
			</ul>
	
			<div class="tab_content">
				<dl>
					<dt>商品详情：</dt>
					<dd>{{ .GoodsDetail.spu_detail }}</dd>
				</dl>
			</div>
		</div>
	</div>

    {{ template "base/base_bottom.html" .}}
	<div class="add_jump"></div>
	<script type="text/javascript">

		// 调用函数
		update_goods_amount()

		function update_goods_amount() { // 计算商品的总价格
			// 获取商品的单价和数量
			price = $('.show_pirze').children('em').text()
			count = $('.num_show').val()

			// 计算总价
			amount = parseFloat(price) * parseInt(count)
			// 渲染到html
			$('.total').children('em').text(amount.toFixed(2) + ' 元')
		}

		$('.add').click(function(){ // 绑定增加商品数量的点击事件
			// 获取原本count值
			count = $('.num_show').val()
			// 数值 +1
			count = parseInt(count) + 1
			// 更新数量
			$('.num_show').val(count)
			// 更新总价
			update_goods_amount()
		})

		$('.minus').click(function() { // 绑定减少商品数量的点击事件
			// 获取原本count值
			count = $('.num_show').val()
			// 数值 -1
			count = parseInt(count) - 1
			// 判断count值
			if (parseInt(count) <= 0) {
				count = 1
			}
			// 更新数量
			$('.num_show').val(count)
			// 更新总价
			update_goods_amount()
		})

		$('.num_show').blur(function() {  // 绑定手动输入商品数量事件
			// 获取输入的值
			count = $(this).val()
			// 验证count
			if (isNaN(count) || count.trim().length==0 || parseInt(count)<= 0) {
				count = 1
			}
			// 更新数量
			$(this).val(parseInt(count))
			// 更新总价
			update_goods_amount()

		})


        // 获取add_cart div元素左上角的坐标
		var $add_x = $('#add_cart').offset().top;
		var $add_y = $('#add_cart').offset().left;

        // 获取show_count div元素左上角的坐标
		var $to_x = $('#show_count').offset().top;
		var $to_y = $('#show_count').offset().left;


		$('#add_cart').click(function(){
			// 获取商品的sku_id 和商城数量
			sku_id = $(this).attr('sku_id')
			count = $('.num_show').val()
			
			// 发起ajax请求
			$.ajax({
				url:"/ttsx/cart/add",
				type:"post",
				dataType: "json",
				data: {"sku_id": sku_id, "count": count}
			}).done(function(ret){
				if (ret.Code == 3) {
					$(".add_jump").css({'left':$add_y+80,'top':$add_x+10,'display':'block'})
					$(".add_jump").stop().animate({
						'left': $to_y+7,
						'top': $to_x+7},
						"fast", function() {
							$(".add_jump").fadeOut('fast',function(){
								$('#show_count').html(ret.cartNum);
							});
					});
				} else {
					alert(ret.errMsg)
				}
			}).fail(function(){
				alert("请先登录")
			})
		})
	</script>

</body>
</html>

{{ end }}
